<template>
  <div>
    <el-button
      v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Import')"
      >导入</el-button
    >
    <el-button
      v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Export')"
      >导入</el-button
    >
    <el-button
      v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Upload')"
      >上传</el-button
    >
    <el-button v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Audit')"
      >审核</el-button
    >

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="Name" label="姓名"> </el-table-column>
      <el-table-column prop="Tel" label="手机号"> </el-table-column>
      <el-table-column prop="Email" label="邮箱"> </el-table-column>
      <el-table-column prop="UserDate" label="注册时间"> </el-table-column>
      <el-table-column prop="RoleName" label="角色">
        <template slot-scope="data">
          <el-tag
            type="danger"
            v-for="(item, index) in data.row.RoleList"
            :key="index"
            >{{ item.Name }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="UserId" label="操作">
        <template slot-scope="data">
          <el-button
            type="primary"
            @click="UpdUser(data.row.UserId)"
            icon="el-icon-edit"
            circle
            v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Update')"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="Del(data.row.UserId)"
            circle
            v-if="PerButton.ButtonValue.split(',').some((x) => x == 'Delete')"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 用户+扩展字段显示 -->
    <div>
      <table>
        <tr>
          <td v-for="(x, index) in Fields" :key="index" style="border: 2x">
            {{ x }}
          </td>
        </tr>
        <tr v-for="(x1, index1) in InfoData" :key="index1">
          <td v-for="(x2, index2) in x1" :key="index2" style="border: 2x">
            {{ x2 }}
          </td>
        </tr>
      </table>
    </div>

    <div>
      <el-button type="danger" @click="UserAddDia" plain>添加用户</el-button>
      <el-button type="danger" @click="GetExcel()" plain>导出</el-button>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:5255/api/User/UploadUserInfo"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
      </el-upload>

      <el-dialog :visible.sync="IsAddShow">
        <UserAddView @CloseDia="CloseDia"></UserAddView>
      </el-dialog>
      <el-dialog v-if="IsUpdShow" :visible.sync="IsUpdShow">
        <UserUpdView :Uid="Uid" @CloseDiaUpd="CloseDiaUpd"></UserUpdView>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import UserAddView from "../../components/UserComponent/UserAddCom.vue";
import UserUpdView from "../../components/UserComponent/UserUpdCom.vue";
export default {
  components: { UserAddView, UserUpdView },
  data() {
    return {
      ButtonList: [
        { text: "查询", value: "Search" },
        { text: "新建", value: "Add" },
        { text: "删除", value: "Delete" },
        { text: "编辑", value: "Update" },
        { text: "导入", value: "Import" },
        { text: "导出", value: "Export" },
        { text: "上传", value: "Upload" },
        { text: "审核", value: "Audit" },
      ],
      IsAddShow: false,
      IsUpdShow: false,
      tableData: [],
      InfoData: [],
      Fields: [],
      Uid: 0,
      PerButton: {},
    };
  },
  created() {
    this.ShowData();
    this.GetUserInfo();
    this.getRolePerM();
  },
  methods: {
    Del(Id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(
              "http://localhost:5255/api/User/DeleleUserInfo?UserId=" + Id
            )
            .then((res) => {
              if (res.data.Success) {
                this.$message.success(res.data.ErrorInfo);
                this.GetUserInfo();
              } else {
                this.$message.error(res.data.ErrorInfo);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    CloseDiaUpd() {
      this.IsUpdShow = false;
      this.GetUserInfo();
      this.ShowData();
    },
    UpdUser(res) {
      this.Uid = res;
      this.IsUpdShow = true;
    },
    CloseDia() {
      this.IsAddShow = false;
      this.GetUserInfo();
      this.ShowData();
    },

    UserAddDia() {
      this.IsAddShow = true;
    },
    GetUserInfo() {
      this.axios
        .get("http://localhost:5255/api/User/GetUserInfo")
        .then((res) => {
          this.tableData = res.data.Data;
          //window.location.reload();
        });
    },
    GetExcel() {
      this.$confirm("确定要导出吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.axios
          .get("http://localhost:5255/api/User/GetExcel")
          .then((res) => {
            if (res.data) {
              this.$message.success("导出成功");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });

        //window.location.reload();
      });
    },
    handleAvatarSuccess(file) {
      if (file) {
        this.$message.success("导入成功");
      }
    },

    getRolePerM() {
      this.axios
        .get("http://localhost:5255/api/User/GetRolePeimiss", {
          params: {
            UserId: sessionStorage.UserId,
            PermId: this.$route.query.Id,
          },
        })
        .then((res) => {
          this.PerButton = res.data;
        });
    },

    ShowData() {
      this.axios
        .get("http://localhost:5255/api/User/ShowUserInfoAndExtendId")
        .then((res) => {
          this.tableData = res.data.Data;
          this.Fields = Object.keys(this.tableData[0]);
          this.tableData.forEach((res) => {
            var tmp = {};
            for (let key in res) {
              tmp[key] = res[key];
            }
            this.InfoData.push(tmp);
          });
        });
    },
  },
};
</script>

<style>
</style>